/*
 * @Author: zeki mini
 * @Date: 2021-04-26 15:19:22
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-03 18:46:26
 * @Description: 司机保密协议
 */
import React, { Component } from 'react';
import { StyleSheet, View, Text, SafeAreaView, Keyboard } from 'react-native';
import {
  px2dp,
  mainBgColorWhite,
  screenWidth,
  fontColorCoffee,
} from '@/styles';
import { msg, } from '@/common';
import { ListItem, } from '@/components';
import api from '@/api';
// import SimpleRowItem from '@/components';
// import { debounce } from '@/common/utils/util';
import SearchLegal from '../../../app-car-owner/add-truck/components/search-legal';

export default class DriverAgreementSign extends Component {
  constructor(props) {
    super(props);
    this.state = {
      legalList: [],
      searchValue: '',
      keyboardHeight: 0,
    };
  }

  componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      (event) => {
        this._keyboardDidShow(event);
      },
    );
    this.keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      (event) => {
        this._keyboardDidHide(event);
      },
    );
  }

  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  render() {
    const { searchValue, legalList } = this.state;

    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.safeContainer}>
          <View>
            <Text style={styles.searchTip}>请选择您要签署的物流公司</Text>
            <SearchLegal
              searchValue={searchValue}
              changeAddress={this.changeAddress}
              clear={this.clear}
            />
            <View style={{ paddingHorizontal: px2dp(32) }}>
              {legalList.length > 0 &&
              legalList.map((item, index) => {
                return <ListItem
                  title={item.entName}
                  onClick={() => this.selectLegal(item)}
                />;
              })}
            </View>
          </View>

          {/* <View style={[styles.btnBox, !isAndroid && {bottom: px2dp(160)}]}>
              <Submit
                text="签署协议"
                onClick={() => {

                }}
                boxStyle={styles.boxStyle}
                btnTextStyle={{
                  fontSize: px2dp(32),
                }}
              />
            </View> */}
        </View>
      </SafeAreaView>
    );
  }

  _keyboardDidShow = (e) => {
    this.setState({
      keyboardHeight: e.endCoordinates.height,
    });
  };

  _keyboardDidHide = (e) => {
    this.setState({
      keyboardHeight: 0,
    });
  };

  // 输入回调
  changeAddress = (val) => {
    if (Number(val) <= 0) {
      return;
    }
    this.setState({ searchValue: val }, () => {
      this.findLegal();
    });
  };

  // 清空
  clear = () => {
    this.setState({ searchValue: '', legalList: [] });
  };

  // 选择物流公司
  selectLegal = (legal) => {
    this.clear();
    // 跳转签署页面
    msg.emit('router: goToNext', {
      routeName: 'ContractDetail',
      routerFrom: 'DriverMain',
      data: legal,
      contractStatus: 1,
    });
  };

  findLegal = () => {
    const { searchValue } = this.state;

    api.supply.getLegal({ entName: searchValue }).then((res) => {
      if (res.success) {
        this.setState({ legalList: res.data });
      } else {
        this.setState({ legalList: [] });
      }
    });
  };

  handleConfirm = (val) => {
    const { isTimeType } = this.state;
    this.setState({ [isTimeType]: Moment(val).format('YYYY/MM/DD') });
    this.setState({ isTimeShow: false });
  };

  handleCancel = (val) => {
    this.setState({ isTimeShow: false });
  };
}
const styles = StyleSheet.create({
  safeContainer: {
    width: screenWidth,
    flex: 1,
    backgroundColor: mainBgColorWhite,
  },
  searchTip: {
    color: '#343332',
    fontSize: px2dp(40),
    marginLeft: px2dp(32),
    paddingTop: px2dp(50),
    paddingBottom: px2dp(32),
  },

  btnBox: {
    flex: 1,
    width: '100%',
    position: 'absolute',
    bottom: px2dp(80),
    justifyContent: 'center',
    alignItems: 'center',
  },

  boxStyle: {
    width: screenWidth - px2dp(110),
    height: px2dp(96),
    borderWidth: 1,
    borderColor: fontColorCoffee,
    borderRadius: px2dp(8),
  },
  itemBox: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: px2dp(24),
    // flex:1,
  },
});
